
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Heart, Pin } from "lucide-react";

export const StudentDiscussions = () => {
  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle className="text-lg font-semibold">Recent Student Activity</CardTitle>
          <Button size="sm">
            <MessageSquare className="w-4 h-4 mr-2" />
            Create Post
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Student Post 1 */}
        <div className="border border-blue-200 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <Pin className="w-4 h-4 text-blue-600" />
            <Badge className="bg-blue-600 text-white text-xs">Popular</Badge>
          </div>
          <div className="flex space-x-4">
            <Avatar>
              <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=student1" />
              <AvatarFallback>AS</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <div className="flex items-center space-x-2 mb-1">
                <span className="font-medium text-gray-900 dark:text-gray-100">Alex Student</span>
                <Badge className="bg-green-600 text-white text-xs">Study Champion</Badge>
                <span className="text-gray-500 dark:text-gray-400">· 1 hour ago</span>
              </div>
              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                Game-Changing Study Technique: The Pomodoro Method
              </h3>
              <p className="text-gray-700 dark:text-gray-300 mb-3">
                Just discovered this amazing technique! Study for 25 minutes, then take a 5-minute break. I've increased my focus by 200% and actually enjoy studying now! Who else has tried this?
              </p>
              <div className="flex flex-wrap gap-2 mb-3">
                <Badge variant="secondary" className="text-xs">Study Tips</Badge>
                <Badge variant="secondary" className="text-xs">Productivity</Badge>
                <Badge variant="secondary" className="text-xs">Time Management</Badge>
              </div>
              <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                <button className="hover:text-blue-600 flex items-center">
                  <MessageSquare className="w-4 h-4 mr-1" />
                  <span>34 Comments</span>
                </button>
                <button className="hover:text-green-600 flex items-center">
                  <Heart className="w-4 h-4 mr-1" />
                  <span>67 Likes</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        {/* Student Post 2 */}
        <div className="flex space-x-4">
          <Avatar>
            <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=student2" />
            <AvatarFallback>MS</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-1">
              <span className="font-medium text-gray-900 dark:text-gray-100">Maya Scholar</span>
              <Badge variant="outline" className="text-xs">Math Enthusiast</Badge>
              <span className="text-gray-500 dark:text-gray-400">· 3 hours ago</span>
            </div>
            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Looking for Study Partners: Calculus AP
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-3">
              Anyone else struggling with integration by parts? I'm looking for 2-3 study partners to meet twice a week. We can work through practice problems together and explain concepts to each other!
            </p>
            <div className="flex flex-wrap gap-2 mb-3">
              <Badge variant="secondary" className="text-xs">Mathematics</Badge>
              <Badge variant="secondary" className="text-xs">AP Calculus</Badge>
              <Badge variant="secondary" className="text-xs">Study Group</Badge>
            </div>
            <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
              <button className="hover:text-blue-600 flex items-center">
                <MessageSquare className="w-4 h-4 mr-1" />
                <span>12 Comments</span>
              </button>
              <button className="hover:text-green-600 flex items-center">
                <Heart className="w-4 h-4 mr-1" />
                <span>18 Likes</span>
              </button>
            </div>
          </div>
        </div>

        {/* Student Post 3 */}
        <div className="flex space-x-4">
          <Avatar>
            <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=student3" />
            <AvatarFallback>JL</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-1">
              <span className="font-medium text-gray-900 dark:text-gray-100">Jordan Lee</span>
              <Badge variant="outline" className="text-xs">Science Explorer</Badge>
              <span className="text-gray-500 dark:text-gray-400">· 5 hours ago</span>
            </div>
            <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
              Success Story: From C to A in Chemistry!
            </h3>
            <p className="text-gray-700 dark:text-gray-300 mb-3">
              Three months ago I was failing chemistry. Today I got my first A on a test! Thanks to everyone in the Chemistry Study Group for your support and shared notes. Consistency really does pay off! 🧪✨
            </p>
            <div className="flex flex-wrap gap-2 mb-3">
              <Badge variant="secondary" className="text-xs">Success Story</Badge>
              <Badge variant="secondary" className="text-xs">Chemistry</Badge>
              <Badge variant="secondary" className="text-xs">Motivation</Badge>
            </div>
            <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
              <button className="hover:text-blue-600 flex items-center">
                <MessageSquare className="w-4 h-4 mr-1" />
                <span>25 Comments</span>
              </button>
              <button className="hover:text-green-600 flex items-center">
                <Heart className="w-4 h-4 mr-1" />
                <span>89 Likes</span>
              </button>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
